import { useIntersectionObserver } from '@vueuse/core'
 // 将图片懒加载的自定义指令注册为自定义插件
export const imgLazyPlugin = {
  install(app){
  app.directive('img-lazy',{
  // 指令触发的生命周期钩子:mounted
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el,binding){
    //el：指令绑定到的元素。这可以用于直接操作 DOM。
    //binding：一个对象，包含以下属性。
      // value：传递给指令的值。例如在 v-my-directive="1 + 1" 中，值是 2。
      // oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
      // arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"。
      // modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
      // instance：使用该指令的组件实例。
      // dir：指令的定义对象。
    const {stop} = useIntersectionObserver(
        el,
        ([{isIntersecting}]) => {
          if(isIntersecting){
            el.src = binding.value
            stop()
          }
        },
      )
  }
})

  }
}
